<template>
  <div id="indexPage" @click="bodyClick">
    <HeadNav
      type="inquire"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="inquire" sort="board"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <!-- 选择品种，日期 -->
            <a-affix :offset-top="36">
              <div class="model-container">
                <div class="model-bg clearfix" style="padding: 10px 15px">
                  <div class="float-left">
                    <a-cascader
                      :field-names="{
                        label: 'name',
                        value: 'category_id',
                        children: 'child_list',
                      }"
                      :options="categoryList"
                      placeholder="所有类目"
                      change-on-select
                      :allowClear="false"
                      :popupVisible="catePopup"
                      expand-trigger="hover"
                      v-model="chooseCategory"
                      @click.stop="cateClick"
                      @change="selectCategory"
                    />
                    <a-select
                      v-model="rankType"
                      style="width: 110px;margin-left:5px;"
                      @change="handleChange"
                    >
                      <a-select-option value="sale_money">按码洋排序</a-select-option>
                      <a-select-option value="sale_count">按销量排序</a-select-option>
                    </a-select>
                  </div>
                  <div
                    class="float-right"
                    style="padding: 5px 0; font-size: 12px"
                  >
                    <span style="display: inline-block; vertical-align: middle"
                      >查看分时视图</span
                    >
                    <a-switch :checked="checked" @change="onChange" />
                  </div>
                </div>
              </div>
            </a-affix>
            <div class="model-container clearfix">
              <div
                class="float-left model-bg real-data"
                style="width: 535px; padding: 15px"
              >
                <div
                  class="real-data-block"
                  style="display: inline-block; width: 200px; cursor: auto"
                >
                  <div>
                    <a-icon type="line-chart" />
                    <span class="secondary-font">本社销售总码洋</span>
                  </div>
                  <div class="data-font"><span class="small">￥</span>{{ publishData.today.toLocaleString() }}</div>
                  <div class="before clearfix">
                    <span class="float-left">昨日全天</span>
                    <span class="num float-right">{{ publishData.yesterday.toLocaleString() }}</span>
                  </div>
                  <div class="before clearfix">
                    <span class="float-left">同时段对比</span>
                    <span class="num red float-right" v-if="publishData.compare_rate > 0"
                      >+{{ publishData.compare_rate }}%</span
                    >
                    <span
                      class="num green float-right"
                      v-else-if="publishData.compare_rate <= 0"
                      >{{ publishData.compare_rate }}%</span
                    >
                    <span class="num float-right" v-else>--</span>
                  </div>
                </div>
                <div
                  style="
                    display: inline-block;
                    width: 285px;
                    vertical-align: top;
                    margin-left: 14px;
                  "
                >
                  <div id="measure1"></div>
                  <!-- <div id="line1" v-show="checked"></div> -->
                </div>
              </div>
              <div
                class="model-bg real-data float-right"
                style="width: 535px; padding: 15px"
              >
                <div
                  class="real-data-block"
                  style="display: inline-block; width: 200px; cursor: auto"
                >
                  <div>
                    <a-icon type="line-chart" />
                    <span class="secondary-font">大盘销售码洋</span>
                  </div>
                  <div class="data-font"><span class="small">￥</span>{{ allData.today.toLocaleString() }}</div>
                  <div class="before clearfix">
                    <span class="float-left">昨日全天</span>
                    <span class="num float-right">{{ allData.yesterday.toLocaleString() }}</span>
                  </div>
                  <div class="before clearfix">
                    <span class="float-left">同时段对比</span>
                    <span class="num red float-right" v-if="allData.compare_rate > 0"
                      >+{{ allData.compare_rate }}%</span
                    >
                    <span
                      class="num green float-right"
                      v-else-if="allData.compare_rate <= 0"
                      >{{ allData.compare_rate }}%</span
                    >
                    <span class="num float-right" v-else>--</span>
                  </div>
                </div>
                <div
                  style="
                    display: inline-block;
                    width: 285px;
                    vertical-align: top;
                    margin-left: 14px;
                  "
                >
                  <div id="measure2"></div>
                  <!-- <div id="line2" v-show="checked"></div> -->
                </div>
              </div>
            </div>
            <div class="model-container clearfix" style="position: relative">
              <div
                class="model-bg publishgoods"
                style="
                  width: 535px;
                  min-height: 430px;
                  padding-bottom: 20px;
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                "
              >
                <div class="section-title">本社品种实时数据</div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="45" />
                      <col width="180" />
                      <col width="80" />
                      <col width="100" />
                      <col width="100" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>品种</td>
                        <td style="text-align: right">实时销量</td>
                        <td style="text-align: right">实时码洋</td>
                        <td style="text-align: right">昨日码洋环比</td>
                      </tr>
                    </thead>
                    <tbody v-if="plist.length > 0">
                      <tr v-for="(item, index) in plist" :key="index">
                        <td>{{ item.rank }}</td>
                        <td>
                          <div class="goods-desc">
                            <span class="goods-image" v-if="item.cover_pic">
                              <img
                                :src="item.cover_pic"
                                alt
                                style="width: 40px; height: 40px"
                              />
                              <div
                                class="goods-logo prev"
                                v-if="item.is_presale == 1"
                              >
                                预
                              </div>
                              <div
                                class="goods-logo group"
                                v-else-if="item.have_presale == 1"
                              >
                                组
                              </div>
                            </span>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <span
                              class="click-font goods-name"
                              :title="item.goods_name"
                              @click.stop="$toDetail(item.goods_id)"
                              >{{ item.goods_name }}</span
                            >
                          </div>
                        </td>
                        <td style="text-align: right">
                          {{ item.sale_count.toLocaleString() }}册
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">￥{{ item.sale_amount.toLocaleString() }}</span>
                        </td>
                        <td style="text-align: right"> 
                          <span class="percent" v-if="item.compare_rate > 0"
                            >+{{ item.compare_rate }}%</span
                          >
                          <span class="green" v-else-if="item.compare_rate < 0"
                            >{{ item.compare_rate }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="5">
                          <div style="position:absolute;width:100%;top:40%;"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div
                class="model-bg float-right allgoods"
                style="width: 535px; min-height: 430px; padding-bottom: 20px;position:relative;"
              >
                <div class="section-title">全品种实时数据</div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="45" />
                      <col width="180" />
                      <col width="80" />
                      <col width="100" />
                      <col width="100" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td>排名</td>
                        <td>品种</td>
                        <td style="text-align: right">实时销量</td>
                        <td style="text-align: right">实时码洋</td>
                        <td style="text-align: right">昨日码洋环比</td>
                      </tr>
                    </thead>
                    <tbody v-if="alist.length > 0">
                      <tr v-for="(item, index) in alist" :key="index">
                        <td>{{ item.rank }}</td>
                        <td>
                          <div class="goods-desc">
                            <span class="goods-image" v-if="item.cover_pic">
                              <img
                                :src="item.cover_pic"
                                alt
                                style="width: 40px; height: 40px"
                              />
                              <div
                                class="goods-logo prev"
                                v-if="item.is_presale == 1"
                              >
                                预
                              </div>
                              <div
                                class="goods-logo group"
                                v-else-if="item.have_presale == 1"
                              >
                                组
                              </div>
                            </span>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <span
                              class="click-font goods-name"
                              :title="item.goods_name"
                              @click.stop="$toDetail(item.goods_id)"
                              >{{ item.goods_name }}</span
                            >
                          </div>
                        </td>
                        <td style="text-align: right">
                          {{ item.sale_count.toLocaleString() }}册
                        </td>
                        <td style="text-align: right">
                          <span class="main-font">￥{{ item.sale_amount.toLocaleString() }}</span>
                        </td>
                        <td style="text-align: right">
                          <span class="percent" v-if="item.compare_rate > 0"
                            >+{{ item.compare_rate }}%</span
                          >
                          <span class="green" v-else-if="item.compare_rate < 0"
                            >{{ item.compare_rate }}%</span
                          >
                          <span v-else>--</span>
                        </td>
                      </tr>
                    </tbody>
                    <tbody v-else>
                      <tr>
                        <td colspan="5">
                          <div style="position:absolute;width:100%;top:40%;"><a-empty /></div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>
<style lang="scss" scoped src="@/style/scss/pages/index.scss"></style>
<script>
import { Chart } from "@antv/g2";
import DataSet from "@antv/data-set";
import { COMMON_PUBLISHERCATEGORY } from "../../apis/common.js";
import { QUERY_REALTIME_INFO, QUERY_REALTIME_GOODS } from "../../apis/inquire.js";
export default {
  data() {
    return {
      pagePower: true,
      categoryList: [],
      chooseCategory: [0],
      catePopup: false,
      publishData: {
        today: 0,
        yesterday: 0,
        compare_rate: 0,
      },
      allData: {
        today: 0,
        yesterday: 0,
        compare_rate: 0,
      },
      plist: [],
      alist: [],
      measureData1: [],
      measureData2: [],
      measureChart1: null,
      measureChart2: null,
      lineList1: [],
      lineList2: [],
      lineChart1: null,
      lineChart2: null,
      showList1: [],
      showList2: [],
      intervalId: null,
      isLoading: true,
      checked: false,
      rankType:"sale_money",
    };
  },
  mounted() {
    this.getActualData();
    this.getFirstCategory();
    this.getListData("all");
    this.getListData("supplier");
  },
  destroyed() {
    this.actualClear();
  },
  methods: {
    // 实时数据获取
    async getActualData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await QUERY_REALTIME_INFO(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.publishData.today = res.data.supplier.today.total;
        this.publishData.yesterday = res.data.supplier.yesterday.total;
        this.allData.today = res.data.all.today.total;
        this.allData.yesterday = res.data.all.yesterday.total;
        this.publishData.compare_rate = res.data.supplier.compare_rate;
        this.allData.compare_rate = res.data.all.compare_rate;
        this.measureData1 = [];
        this.measureData2 = [];
        this.lineList1 = [];
        this.lineList2 = [];
        this.showList1 = [];
        this.showList2 = [];
        res.data.supplier.yesterday.chart_data.map((value, key) => {
          let _obj = {},
            _obj1 = {};
          _obj.time = value.time;
          _obj.昨日 = value.value;
          _obj1.time = value.time;
          _obj1.昨日 = value.per_ten_value;
          this.measureData1.push(_obj);
          this.lineList1.push(_obj1);
        });
        res.data.supplier.today.chart_data.map((value, key) => {
          this.measureData1[key].今日 = value.value;
          this.lineList1[key].今日 = value.per_ten_value;
        });
        res.data.all.yesterday.chart_data.map((value, key) => {
          let _obj = {},
            _obj1 = {};
          _obj.time = value.time;
          _obj.昨日 = value.value;
          _obj1.time = value.time;
          _obj1.昨日 = value.per_ten_value;
          this.measureData2.push(_obj);
          this.lineList2.push(_obj1);
        });
        res.data.all.today.chart_data.map((value, key) => {
          this.measureData2[key].今日 = value.value;
          this.lineList2[key].今日 = value.per_ten_value;
        });
        if (this.checked) {
          this.showList1 = this.lineList1;
          this.showList2 = this.lineList2;
        } else {
          this.showList1 = this.measureData1;
          this.showList2 = this.measureData2;
        }
        let _this = this;
        this.$nextTick(() => {
          if(_this.measureChart1){
            _this.measureChart1.destroy();
            _this.initActual(1);
          }else{
            _this.initActual(1);
          }
          if(_this.measureChart2){
            _this.measureChart2.destroy();
            _this.initActual(2);
          }else{
            _this.initActual(2);
          }
          _this.actualDataRefreh();
          _this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取品种
    async getListData(type) {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        type: type,
        page: 1,
        page_size: 100,
        rank_type: this.rankType,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await QUERY_REALTIME_GOODS(data);
      if (res.code == 0) {
        this.pagePower = true;
        if (type == "all") {
          this.alist = [];
          this.alist = res.data;
        } else if (type == "supplier") {
          this.plist = [];
          this.plist = res.data;
        }
        this.$nextTick(()=>{
          this.isLoading = false;
        })
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取初级分类列表
    async getFirstCategory() {
      var tStamp = this.$getTimeStamp();
      let data = {
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        // floor: 2,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMMON_PUBLISHERCATEGORY(data);
      if (res.code == 0) {
        this.categoryList = [];
        // this.categoryList = res.data;
        let _data = {
          category_id: 0,
          name: "所有类目",
          pid: 0,
        };
        this.categoryList.push(_data);
        res.data.map((value, key) => {
          this.categoryList.push(value);
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    handleChange(value){
      this.rankType = value;
      this.isLoading = true;
      this.getListData("all");
      this.getListData("supplier");
    },
    onChange(checked) {
      this.checked = checked;
      this.showList1 = [];
      this.showList2 = [];
      if (this.checked) {
        this.showList1 = this.lineList1;
        this.showList2 = this.lineList2;
      } else {
        this.showList1 = this.measureData1;
        this.showList2 = this.measureData2;
      }
      this.measureChart1.destroy();
      this.measureChart2.destroy();
      this.initActual(1);
      this.initActual(2);
    },
    // 定时刷新数据函数
    actualDataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      let _this = this;
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        // console.log("刷新" + new Date());
        _this.isLoading = true;
        _this.getActualData(); //加载数据函数
        _this.getListData("all");
        _this.getListData("supplier");
      }, 60000);
    },
    // 停止定时器
    actualClear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    cateClick() {
      this.catePopup = true;
    },
    bodyClick() {
      this.catePopup = false;
    },
    // 选择分类
    selectCategory(value) {
      this.catePopup = false;
      this.isLoading = true;
      this.getActualData();
      this.getListData("all");
      this.getListData("supplier");
    },
    initActual(type) {
      let chart,measureChart1Dv;
      if(type == 1){
        measureChart1Dv = new DataSet.DataView().source(this.showList1);
        chart = new Chart({
          container: "measure1",
          autoFit: true,
          height: 125,
        });
        this.measureChart1 = chart;
      }else{
        measureChart1Dv = new DataSet.DataView().source(this.showList2);
        chart = new Chart({
          container: "measure2",
          autoFit: true,
          height: 125,
        });
        this.measureChart2 = chart;
      }
      measureChart1Dv.transform({
        type: "fold",
        fields: ["昨日", "今日"], // 展开字段集
        key: "type", // key字段
        value: "value", // value字段
      });
      chart.data(measureChart1Dv.rows);
      chart.scale("time", {
        range: [0, 1],
      });
      chart.scale("value", {
        nice: true,
      });
      chart.axis("time", {
        tickLine: null,
        label: {
          formatter: function (value) {
            if (value == "00:00") {
              return "0";
            } else if (value == "02:00") {
              return "2";
            } else if (value == "04:00") {
              return "4";
            } else if (value == "06:00") {
              return "6";
            } else if (value == "08:00") {
              return "8";
            } else if (value == "10:00") {
              return "10";
            } else if (value == "12:00") {
              return "12";
            } else if (value == "14:00") {
              return "14";
            } else if (value == "16:00") {
              return "16";
            } else if (value == "18:00") {
              return "18";
            } else if (value == "20:00") {
              return "20";
            } else if (value == "22:00") {
              return "22";
            } else {
              return "";
            }
          },
          autoHide: false | true,
          autoRotate: false,
        },
      });
      chart.legend(false);
      chart.tooltip({
        shared: true,
        showCrosshairs: true,
      });
      chart
        .area()
        .position("time*value")
        .color("type", (type) => {
          if (type == "昨日") {
            return "#D1DDF6";
          } else if (type == "今日") {
            return "#5A8BEE";
          }
        })
        .shape("smooth");
      chart
        .line()
        .position("time*value")
        .color("type", (type) => {
          if (type == "昨日") {
            return "#D1DDF6";
          } else if (type == "今日") {
            return "#5A8BEE";
          }
        })
        .shape("smooth")
        .size(1);
      chart.render();
    },
    publisherChange() {
      this.isLoading = true;
      this.chooseCategory = [0];
      this.checked = false;
      this.getActualData();
      this.getFirstCategory();
      this.getListData("all");
      this.getListData("supplier");
    },
  },
};
</script>